import type {FormValidationStatus} from "naive-ui/es/form/src/interface";
import {useUserStore} from "@/stores";
import {EmitNames} from "@/constants/common";
import emitter from "@utils/common/Mitt";
import {requireImg} from "@utils/common/Image";
import {NAvatar, NInput} from "naive-ui";

/**
 * 锁屏 组件
 * @date 2023/10/3
 */
export default defineComponent({
  name: "LockScreenLayout",
  setup() {
    const { userName, lockBgImageUrl, avatar, password } = useUserStore();
    const lockPassword = ref("");
    const lockPassEl = ref<HTMLElement>();
    const passErr = ref<boolean>(false);
    const passStatus = ref<FormValidationStatus>("success");
    //  解锁
    const toUnLock = () => {
      if (lockPassword.value != password) {
        passErr.value = true;
        passStatus.value = "error";
        lockPassword.value = "";
        window.$notification["error"]({
          content: "错误",
          meta: "密码错误",
          closable: false,
          duration: 3000,
          keepAliveOnHover: true,
        });
        setTimeout(() => {
          passErr.value = false;
          passStatus.value = "success";
        }, 2000);
        return;
      }
      emitter.emit(EmitNames.LockScreen, false);
    };

    return () => (
      <main
        id="lock-screen"
        style={{ backgroundImage: `url('${requireImg(lockBgImageUrl)}')` }}
        class="z-[999] fixed inset-0 flex flex-col justify-center items-center text-white -mt-[100px] backdrop-blur-[50px] object-cover bg-cover bg-no-repeat"
      >
        <NAvatar round size={125} src={requireImg(avatar)} />
        <span class="text-2xl mt-10 mb-3.5" v-text={userName}></span>
        <div class="w-40">
          <NInput
            ref={lockPassEl}
            class={["pl-2 bg-gray-700", passErr.value ? "animate__animated animate__shakeX" : ""]}
            type="password"
            round
            status={passStatus.value}
            showPasswordOn={"mousedown"}
            v-model:value={lockPassword.value}
            placeholder="请输入密码"
            maxlength={8}
            onKeyup={e => {
              // 回车按键
              e.code == "Enter" && toUnLock();
            }}
          />
        </div>
      </main>
    );
  },
});
